import { DoubleLeftOutlined } from '@ant-design/icons';
import { Checkbox, Col, Collapse, Row, Switch } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import {goodsFilterItem, orderTypeFilterItem} from '@/pages/OrderModule/orderList/components/Filter/constant.js';

const { Panel } = Collapse;
const CheckboxGroup = Checkbox.Group;
const orderTypeOptions = [
  { label: '已合并订单', value: 'merge' },
  { label: '已拆分订单', value: 'split' },
  { label: '跑量订单', value: 'runVolume' },
  { label: '手工订单', value: 'isManualSource' },
  { label: '同步订单', value: 'isAutoSource' },
  { label: '组合装缺失', value: 'missingSubGoods' },
  { label: '补发', value: 'reissue' },
  { label: '换货', value: 'barter' },
  { label: '运费拦截', value: 'interceptExpressState' },
  { label: '取消运费拦截', value: 'forcedDelivery' },
];

/**
 * @desc: 筛选框：订单类型组件
 */
export const OrderType = ({ value = {}, onChange }) => {
  const defaultCheckList = useMemo(() => {
    return Object.keys(value.orderTypeMap).filter((key) => value?.orderTypeMap[key]);
  }, [value]);
  const [checkedList, setCheckedList] = useState(defaultCheckList);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const onCheckChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < orderTypeOptions.length);
    setCheckAll(list.length === orderTypeOptions.length);
  };
  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? orderTypeOptions.map((item) => item.value) : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  useEffect(() => {
    let changedValue = {};
    Object.keys(value.orderTypeMap).forEach((key) => {
      if (checkedList.includes(key)) {
        changedValue[key] = true;
      } else {
        changedValue[key] = false;
      }
    });
    triggerChange({ orderTypeMap: changedValue });
  }, [checkedList]);

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };

  const onInputChange = (key, value) => {
    triggerChange({ [key]: value });
  };

  const { checkingMap } = useFilterFieldsConfig();
  if(Object.values(orderTypeFilterItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }
  return (
    <Collapse
      bordered={false}
      data-theme="filter"
      expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
      expandIconPosition="end"
      defaultActiveKey={['orderType']}
      className={Style['filter-item-collapse']}
    >
      <Panel
        key="orderType"
        className={Style['filter-item-collapse-panel']}
        header={
          <div style={{ display: 'flex',  alignItems: 'center' }} onClick={(e) => {
            if(e.target.className === 'ant-switch-inner') {
              e.stopPropagation()
            }
          }}>
            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
              订单类型
            </Checkbox>
            <Switch data-id="orderTypeOrSwitch" style={{marginLeft: '10px'}} checked={!value.isOrderTypeOr} checkedChildren="并且" unCheckedChildren="或者" onChange={(checked) => triggerChange({ isOrderTypeOr: !checked })} />
          </div>
        }
      >
        {checkingMap.orderTypeArr && (
          <Checkbox.Group onChange={onCheckChange} value={checkedList} style={{marginTop: 5}}>
            <Row gutter={[0, 10]}>
              {orderTypeOptions.map((item) => (
                <Col span={12} key={item.value}>
                  <Checkbox style={{ fontSize: '12px !important' }} value={item.value}>
                    {item.label}
                  </Checkbox>
                </Col>
              ))}
            </Row>
          </Checkbox.Group>
        )}
      </Panel>
    </Collapse>
  );
};
export default OrderType;
